import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useState } from 'react';
import { useLocation, useNavigate } from "react-router-dom"

type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//   label: React.ReactNode,
//   key: React.Key,
//   icon?: React.ReactNode,
//   children?: MenuItem[],
// ): MenuItem {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   } as MenuItem;
// }

// const items: MenuItem[] = [
//   getItem('Option 1', '/page1', <PieChartOutlined />),
//   getItem('Option 2', '/page2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

// 上面可以简写这样子
const items: MenuItem[] = [
  {
    label: 'Option 1',
    key: '/page1',
    icon: <PieChartOutlined />
  },
  {
    label: 'Option 2',
    key: '/page2',
    icon: <DesktopOutlined />
  },
  {
    label: 'User',
    key: 'sub1',
    icon: <UserOutlined />,
    children: [
      {
        label: 'UserTom',
        key: '/userTom',
      },
      {
        label: 'Bill',
        key: '4',
      },
      {
        label: 'Alex',
        key: '5',
      }
    ]
  },
  {
    label: 'Team',
    key: 'sub2',
    icon: <TeamOutlined />,
    children: [
      {
        label: 'Tom 1',
        key: '6',
      },
      {
        label: 'Tom 2',
        key: '8',
      },

    ]
  },
  {
    label: 'Files',
    key: '9',
    icon: <FileOutlined />
  }
]

function comp() {

  const navigateTo = useNavigate()

  const currentRoute = useLocation()
  //如果发现加载两次，这是开发环境下才会生产环境就不会了，在main. tsx把严格，模式标签去掉就不会了。至于为什么react要它加载两次详情见:https://blog.csdn.net/HYHhmbb/article/details/125973790
  console.log("----------",currentRoute.pathname); // currentRoute.pathname:   "/page1"


  const menuClick = (e: { key: string }) => {
    // 点击跳转到对应的路由编程式 导航跳转，利用 到一个hook
    navigateTo(e.key)
  }

  // 拿着currentRoute.pathname跟items数组的每一项的children的key值进行对比，如果找到了相等了，就要他上一级的key
  // 这个key给到openKeys数组的元素，作为初始值

  let firstOpenKey:string = "";
  // 在这里进行对比   find
  function findKey(obj:{key:string}){
    return obj.key === currentRoute.pathname
  }

  // 多对比的是多个children
  for(let i=0;i<items.length;i++){
    // 判断找到不到
    if(items[i]!['children'] && items[i]!['children'].length>0 && items[i]!['children'].find(findKey)){
      firstOpenKey = items[i]!.key as string;
      break;
    }
  }

  const [openKey, setOpenKey] = useState([firstOpenKey]);
  const handleOpenChange = (keys: string[]) => {
    // 什么时候执行这个函数里面的代码?展开和回收某项菜单的时候执行这里的代码
    console.log(keys)  // keys是一个数组，记录了当前哪一项是展开的(用key开记录)
    setOpenKey([keys[keys.length - 1]])
  }
  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={[currentRoute.pathname]}
      mode="inline"
      items={items}
      onClick={menuClick}
      onOpenChange={handleOpenChange}
      // 当前菜单展开项的key数组
      openKeys={openKey}

    />
  );
}

export default comp;